<template>
	<view>

		<view v-if="info.user_status == 0" class="state">待付款</view>
		<view v-if="info.user_status == 1" class="state">已付款</view>
		<view v-if="info.user_status == 2" class="state">已使用</view>
		<view v-if="info.user_status == 3" class="state">已过期</view>

		<view class="ek-card">
			<view>
				<view class="h1">预计到店时间<text>{{merInfo.arrive_time | formatDate}}</text></view>

				<view class="h3">预定手机号{{ merInfo.phone }}</view>
				<!-- <view v-for="(sub, index) in info.child" :key="index" class="h2 flex jcsb">
					<view>座位号：
						<text class="ek-color-red">{{ sub.row_number }}排{{ sub.column_number }}号</text>
					</view>
					<view>{{ sub.price }}</view>
				</view> -->
				<view class="h3">
					<text>用餐人数</text><text>{{merInfo.person_number}}人</text><text>{{merInfo.name}}({{merInfo.number}})</text>
				</view>
			</view>
		</view>

		<view class="ek-card" v-if="info.verify_code">
			<view class="h1">餐饮券</view>
			<view clss="h2">券码 {{info.verify_code}}</view>
			<!-- <view v-for="(sub, index) in 1" :key="index" class="desc flex jcsb aic">
				<view>劵码：{{ sub.sn_number }}</view>
				<image :src="sub.sn_url" class="qrcode" @click="previewCode(sub)"></image>
			</view> -->
		</view>
		<!-- <view class="ek-card">
			<view class="h1">餐饮券</view>
			<view clss="h2">{{ info.child.length }}张可用</view>
			<view v-for="(sub, index) in info.child" :key="index" class="desc flex jcsb aic">
				<view>劵码：{{ sub.sn_number }}</view>
				<image :src="sub.sn_url" class="qrcode" @click="previewCode(sub)"></image>
			</view>
		</view> -->
		<!-- 店铺商品列表 -->
		<!-- v-for="(item,index) in info.orderProduct" :key="index" -->
		<view class="order-wrapper">
			<view class="title" @click="goStore(info.merchant.mer_id)">{{info.merchant.mer_name}}
			</view>
			<view class="goods-box">
				<view v-for="(goods,j) in info.orderProduct" :key="goods.order_product_id" >
					<view class="item">
						<view class="info-box">
							<view class="name line1">{{goods.cart_info.product.store_name}}</view>
							<view class="msg">{{goods.cart_info.productAttr.sku}}</view>
							<view class="num">x{{goods.product_num}}</view>
						</view>

						<view class="price">￥{{goods.cart_info.productAttr.price}}</view>
					</view>
				</view>
				<view class='item acea-row row-between'>
					<view>商品总额：</view>
					<view class='conter'>￥{{info.total_price}}</view>
				</view>
			</view>
		</view>



		<view class='wrapper'>
			<view class='item acea-row row-between'>
				<view>订单编号：</view>
				<view class='conter acea-row row-middle row-right'>{{info.order_sn}}
				</view>
			</view>
			<view class='item acea-row row-between'>
				<view>下单时间：</view>
				<view class='conter'>{{info.create_time || 0}}</view>
			</view>
			<view v-if="info.pay_time" class='item acea-row row-between'>
				<view>支付时间</view>
				<view class='conter'>{{ info.pay_time}}</view>
			</view>
			<view class='item acea-row row-between'>
				<view>订单备注：</view>
				<view class='conter'>{{info.remark || '无'}}</view>
			</view>
			<!-- <view class='item acea-row row-between'>
				<view>支付状态：</view>
				<view v-if="info.status == 0" class="conter">待付款</view>
				<view v-if="info.status == 1" class="conter">已付款</view>
				<view v-if="info.status == 2" class="conter">已使用</view>
				<view v-if="info.status == 3" class="conter">已过期</view>
			</view>
			 -->
			<view v-if="info.verify_time" class='item acea-row row-between'>
				<view>核销时间</view>
				<view class='conter'>{{ info.verify_time }}</view>
			</view>
			<!-- <view class='item acea-row row-between'>
				<view>支付方式：</view>
				<view class='conter'>{{orderInfo._status._payType}}</view>
			</view> -->
		</view>

		<!-- <view class='wrapper'>
			<view class='item acea-row row-between'>
				<view>订单号</view>
				<view class='conter'>{{ info.order_sn }}</view>
			</view>
			<view class='item acea-row row-between'>
				<view>下单时间</view>
				<view class='conter'>{{ info.add_time|formatDate }}</view>
			</view>
			<view v-if="info.pay_time" class='item acea-row row-between'>
				<view>支付时间</view>
				<view class='conter'>{{ info.pay_time|formatDate }}</view>
			</view>
			<view class='item acea-row row-between'>
				<view>订单状态</view>
				<view v-if="info.user_status == 0" class="conter">待付款</view>
				<view v-if="info.user_status == 1" class="conter">已付款</view>
				<view v-if="info.user_status == 2" class="conter">已使用</view>
				<view v-if="info.user_status == 3" class="conter">已过期</view>
			</view>
			<view class='item acea-row row-between'>
				<view>订单金额</view>
				<view class='conter'>¥{{ pay_money }}</view>
			</view>
			<view v-if="info.refund_time" class='item acea-row row-between'>
				<view>申请退款时间</view>
				<view class='conter'>{{ info.refund_time|formatDate }}</view>
			</view>
		</view> -->
		<view style="height: 100px"></view>
		
		<view v-if="info.paid == 0" class="footer">
			<text class="font-color-red">￥{{ info.total_price }}</text>
			<view class="btn" @click="goPay">立即支付</view>
		</view>
		<!--  && info.refund_order == 0 -->
		<view v-if="info.paid == 1 && info.orderProduct[0].is_refund == 0" class="footer">
			<view class="flex-1"></view>
			<view class="btn" @click="goRefund">退款</view>
		</view>
		<payment :noPages="true" :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun'
			:order_id="info.order_id" :totalPrice='info.total_price'></payment>
	</view>
</template>

<script>
	import productConSwiper from "@/components/productConSwiper/index.vue";
	
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	import {
		activityRefundOrder,
		payActivity,
		performGetOrderDetail,
		show_merchant_reserve,
		performPay
	} from "@/api/2_activity";
	import {
		groupOrderDetail,
		getOrderDetailType
	} from "@/api/order";

import payment from '@/components/payment';
	const app = getApp()

	export default {
		components: {
			productConSwiper,
			payment
		},
		data() {
			return {
				item: {},
				info: {
					child: []
				},
				imgUrls: [],
				domain: HTTP_REQUEST_URL,
				description: '',
				tagStyle: {
					img: "width:100%;display:block;",
				},
				refund_msg: [],
				day_time: '',
				sub_bill: '',
				order_id: '',
				paid: '',
				merInfo: {},
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'wechat',
						title: '微信快捷支付',
						payStatus: 1
					},
					// {
					// 	name: "支付宝支付",
					// 	icon: "icon-zhifubao",
					// 	value: 'alipay',
					// 	title: '支付宝支付',
					// 	payStatus: app.globalData.alipay_open
					// },
					// {
					// 	name: "余额支付",
					// 	icon: "icon-yuezhifu",
					// 	value: 'balance',
					// 	title: '可用余额:',
					// 	number: 0,
					// 	payStatus: app.globalData.yue_pay_status
					// }
				],
				pay_close: false,
				pay_order_id: '',
			};
		},
		onLoad(options) {
			console.log(options);

			// this.day_time = options.day_time
			// this.sub_bill = options.sub_bill
			this.paid = options.paid
			this.order_id = options.order_id
			// this.id	= options.id
			// this.item = JSON.parse(options.item)
			// this.refund_msg = JSON.parse(options.refund_msg)
			// if (this.paid == 0) {
			// 	this.init()
			// } else {
				this.init2()
			// }
			this.show_merchant_reserve()

		},
		computed: {
			pay_money() {
				// return this.info.child.reduce((a, b) => {
				// 	return +a + +b.price
				// }, 0)
				return 0
			}
		},
		methods: {
			/**
			 * 关闭支付组件
			 * 
			 */
			payClose: function() {
				this.pay_close = false;
				this.init2()
			},
			/**
			 * 事件回调
			 * 
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				(action && this[action]) && this[action](value);
			},
			/**
			 * 打开支付组件
			 * 
			 */
			goPay: function(item) {
				this.$set(this, 'pay_close', true);
			},
			
			
			goStore(id) {
				uni.navigateTo({
					url: `/pages/2_development/store/details?id=${id}`
				});
			},
			previewCode(item) {
				uni.previewImage({
					urls: [item.sn_url]
				})
			},
			show_merchant_reserve() {
				show_merchant_reserve(this.order_id).then(res => {
					let {
						info
					} = res.data
					this.merInfo = info
				})
			},
			init2() {
				getOrderDetailType(this.order_id).then(res => {
					let {
						data
					} = res
					console.log('---------', this.info);
					this.info = data
				})
			},
			init() {
				console.log('----init-----');
				groupOrderDetail(this.order_id).then(res => {
					let {
						data
					} = res
					console.log('---------', this.info);
					this.info = data
				})
			},
			goRefund() {
				// performRefundOrder
				uni.navigateTo({
					url: `/pages/2_development/user/store_order_refund?order_id=${this.order_id}`
				})
			},
			
			refundOrder() {
				activityRefundOrder(this.item.id, {
					refund_msg: this.refund_msg[e.detail.value]
				}).then(res => {
					this.$util.Tips({
						title: '提交成功',
						icon: 'success'
					});
					this.init()
				}).catch(err => {
					this.$util.Tips({
						title: err,
						icon: 'fail'
					});
				})
			}
		}
	};
</script>

<style lang="scss">
	@import "../../index/style/main.scss";
	@import "./style.scss";

	.wrapper {
		background-color: #fff;
		margin-top: 12rpx;
		padding: 30rpx;
	}

	.wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}

	.wrapper .item~.item {
		margin-top: 20rpx;
	}

	.wrapper .item .conter {
		color: #868686;
		width: 460rpx;
		text-align: right;
	}

	.wrapper .item .conter .copy {
		font-size: 20rpx;
		color: #333;
		border-radius: 17rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx;
		margin-left: 24rpx;

	}

	.wrapper .actualPay {
		border-top: 1rpx solid #eee;
		margin-top: 30rpx;
		padding-top: 30rpx;
	}

	.wrapper .actualPay .money {
		font-weight: bold;
		font-size: 30rpx;
	}

	.footer {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.price {
			font-size: 28rpx;
			color: #fff;
		}

		.btn {
			font-size: 30rpx;
			color: #fff;
			width: 240rpx;
			height: 70rpx;
			background-color: #e93323;
			border-radius: 50rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}

	.state {
		height: 100rpx;
		text-align: center;
		color: #fa6514;
		line-height: 100rpx;
		margin-bottom: 30rpx;
		background: #fff;
	}

	.bnt {
		margin: 30rpx;
	}

	.btns {
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.joinCart {
		flex: 1;
		border-radius: 50rpx 0 0 50rpx;
		background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
	}

	.buy {
		flex: 1;

		border-radius: 0 50rpx 50rpx 0;
		background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
	}

	.users {
		padding-left: 30rpx;
		flex-wrap: wrap;
		/* #ifdef MP */
		margin-top: 0;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 0;

		/* #endif */
		.avatar {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 30%;
			margin-right: 3%;
			margin-top: 20rpx;

			height: 80rpx;
			width: 80rpx;
			border-radius: 40rpx;
			background: #eee;

			&.active {
				background: #999;
				color: #fff;
			}
		}
	}

	.attribute {
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #82848f;
		height: 80rpx;
		position: relative;
	}

	.atterTxt {
		font-size: 28rpx;
		color: #282828;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		// width: 400rpx;
		margin-left: 20rpx;
	}


	.info {
		position: relative;

		.name {
			margin: 20rpx 30rpx 0;
			font-size: 32rpx;
			font-weight: 700;
		}

		.score {
			height: 50rpx;
		}

		.desc {
			margin: 0 30rpx;
			font-size: 24rpx;
			color: #82848f;
			margin-top: 10rpx;
		}

		.shoucang {
			font-size: 18rpx;
			text-align: center;
			color: #666;
			position: absolute;
			top: 10rpx;
			right: 30rpx;
		}
	}

	.notice-title {
		font-size: 28rpx;
		color: #333;
		margin: 30rpx;
		font-weight: bold;
	}

	.content {
		margin: 20rpx 30rpx 0;
	}


	.qrcode {
		width: 40px;
		height: 40px;
	}

	.order-wrapper {
		margin-top: 15rpx;

		.title {
			display: flex;
			align-items: center;
			height: 86rpx;
			padding: 0 30rpx;
			border-bottom: 1px solid #f0f0f0;
			background-color: #fff;

			.iconfont {
				font-size: 24rpx;
				color: #666;
				margin-top: 6rpx;
				margin-left: 5rpx;
			}
		}

		.goods-box {
			.item {
				display: flex;
				padding: 25rpx 30rpx 25rpx 30rpx;
				background-color: #fff;
				justify-content: space-between;

				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 16rpx;
				}

				.info-box {
					display: flex;
					// flex-direction: column;
					justify-content: space-between;
					margin-left: 25rpx;
					width: 450rpx;

					.msg {
						color: #868686;
						font-size: 20rpx;
					}


				}

				.price {
					font-size: 26rpx;
					color: $theme-color;
				}

				.num {
					flex: 1;
					text-align: right;
					font-size: 26rpx;
					color: #868686;
				}
			}


		}

	}
</style>
